<template>
  <nav id="paginator">
      <ul class="pagination">
        <li @click="pageChange($event,-1)">
          <span>&laquo;</span>
        </li>
        <li v-for="(pnum,index) in pgnum"  @click="pageChange($event,index)">
          <span :class="{active:(index===currentpgn)}">{{ pnum }}</span>
        </li>
        <li @click="pageChange($event,-2)">
          <span>&raquo;</span>
        </li>
      </ul>
  </nav>
</template>

<script>
export default {
  name: "Paginator",
  props: {
    pgnum: {
      type: Array,
      default() {
        return []
      }
    },
    isChangeClass: {
      type:String,
      default() {
        return '';
      }
    }
  },
  data(){
    return {
      currentpgn:0,
      lastClass:'index',
    }
  },
  methods:{
    pageChange(e,index){
      if(index===-1 && this.currentpgn!==0){
        this.currentpgn--;
      }else if(index===-2 && this.currentpgn!==this.pgnum[this.pgnum.length-1]-1){
        this.currentpgn++;
      }else if(index>=0&&index<=this.pgnum[this.pgnum.length-1]-1){
        this.currentpgn = index;
      }

      this.$emit('changepage',index);
    }
  },
  updated() {
    if(this.isChangeClass!==this.lastClass){
      this.currentpgn = 0;
      this.lastClass = this.isChangeClass;
    }
  }
}
</script>

<style scoped>
#paginator {
  position: absolute;
  background-color: #f7f3f3;
  width: 100%;
  height: 50px;
  bottom: 0px;
  border-top: 2px solid #bbbbbb;
  text-align: center;
}
.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 10px 0;
  border-radius: 4px;
  z-index: 10;
}
.pagination > li {
  display: inline;
}
.pagination > li >span.active{
  background-color: #e28398;
}

.pagination > li > a,.pagination > li > span{
  position: relative;
  float: left;
  padding: 3px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: #337ab7;
  text-decoration: none;
  /*background-color: #fff;*/
  border: 1px solid #ddd;
  cursor: pointer;
}
</style>